<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <title>EUI·ADMIN管理系统</title>
    <link rel="shortcut icon" type="text/css" href="/static/images/bitbug_favicon.ico">
    <link rel="stylesheet" href="../../../static/libs/layui/css/layui.css">
    <link rel="stylesheet" href="../../../static/css/login.css">
    <style>
        [v-cloak] {
            display: none;
        }
        .login-footer {
            position: fixed; /*or前面的是absolute就可以用*/
            bottom: 0px;
            width: 100%;
            background-color: white;
        }
        .login-footer div {
            margin: 0 auto;
            text-align: center;
            font-size: 12px;
            width: 250px;
        }
        .login-footer a {
            color: #009688;
        }
    </style>
</head>

<body>
    <div class="login-wrapper" id="login">
        <div class="login-form">
            <h3>EUI·ADMIN</h3>
            <form>
                <div class="input_outer">
                    <span class="icon_user"></span>
                    <input type="text" class="form-input" placeholder="请输入账号" v-model="userName" @keydown="funLoginNameKeyDown">
                </div>
                <div class="input_outer">
                    <span class="icon_pass"></span>
                    <input type="password" class="form-input" placeholder="请输入密码" v-model="passWord" @keydown="funPasswordKeyDown"
                        ref="passWord">
                </div>
                <div class="input_outer">
                    <span class="icon_yzm layui-icon layui-icon-vercode"></span>
                    <input type="text" name="VerifyCode" class="form-input" placeholder="请输入验证码" v-model="yzm" @keydown="funYzmKeyDown"
                        ref="yzm">
                    <div class="yzm" >
                        <!--<img class="img" id="img" @click="code()" src="/loginController/verifyCode" alt="图片加载失败">-->
                        <img class="img" id="img" @click="code()" :src="imgUrl" alt="图片加载失败">
                    </div>
                </div>
                <div class="login-button-group">
                    <a href="javascript:void(0);" class="login-button" @click="handleClickBtn">登录</a>
                </div>

            </form>
        </div>
        <div class="login-footer">
            <div><span>ICP备案号: <a href="http://www.beian.miit.gov.cn/">闽ICP备19010647号-2</a></span></div>
        </div>
    </div>
    <script src="../../../static/libs/layui/layui.all.js"></script>
    <script src="../../../static/js/vue.js"></script>
    <script>
        var $ = layui.jquery;
        var login = new Vue({
            el: "#login",
            data: {
                userName: '',
                passWord: '',
                yzm: '',
                imgUrl: ''
            },
            computed: {

            },
            mounted() {
                this.imgUrl = "/loginController/verifyCode";
              //  this.code();
            },
            methods: {
                dologin() {
                    var _this = this;
                    if (this.userName == '') {
                        layer.msg("账号不可为空", {
                            icon: 5
                        });
                        return;
                    }
                    if (this.passWord == '') {
                        layer.msg("密码不可为空", {
                            icon: 5
                        });
                        return;
                    }
                    if (this.yzm.trim() == '') {
                        layer.msg("验证码不可为空", {
                            icon: 5
                        });
                        return;
                    }
                   /* if(this.userName != 'admin' || this.passWord != 'admin'){
                        layer.msg("账号或者密码错误~", {
                            icon: 5
                        });
                        return;
                    }*/
                    var index ;
                    index = layer.msg("登陆中....", {
                        icon: 6
                    });
                    $.ajax({
                        url: '/loginController/login',
                        type: 'post',
                        async: false,
                        data: {username:this.userName,password:this.passWord,VerifyCode:this.yzm},
                        success: function (res) {
                            if (res.success) {
                                layer.close(index);
                                index = layer.msg("登录成功，正在跳转……", {
                                    icon: 6
                                });
                                setTimeout(function () {
                                    layer.close(index);
                                    // localStorage.setItem("xc_token", res.token);
                                    window.location.href = '/index.html';
                                }, 1000)
                                /*window.location.href = "/index.html";*/
                            } else {
                                layer.msg(res.msg, {
                                    icon: 5
                                });
                                _this. code();
                                return;
                            }
                        }
                    });


                },
                handleClickBtn() {
                    this.dologin();
                },
                code() {
                    var num = Math.ceil(Math.random() * 10); //生成一个随机数（防止缓存）
                    var _this  = this;
                    _this.imgUrl =  _this.imgUrl+"?"+num;
                   /*var img = document.getElementById("img");
                    img.src = "/loginController/verifyCode?"+new Date().getTime();*/
                  /*  var _this = this;
                    $.get('/loginController/verifyCode', function(res) {
                            _this.imgUrl = res;
                            console.log(_this.imgUrl)
                    })*/
                },
                /* changeCodeImg() {
                    var num = Math.ceil(Math.random() * 10); //生成一个随机数（防止缓存）
                    this.imgUrl = this.imgUrl + '?' + num;
                }, */
                funLoginNameKeyDown(event) {
                    if (event.keyCode == 13) {
                        this.$refs.passWord.focus();
                        return false;
                    }
                },
                funPasswordKeyDown(event) {
                    if (event.keyCode == 13) {
                        this.$refs.yzm.focus();
                        return false;
                    }
                },
                funYzmKeyDown(event) {
                    if (event.keyCode == 13) {
                        this.dologin();
                        return false;
                    }
                }
            }
        })
    </script>
</body>

</html>